<template>
  <div class="tab">
    <div class="position">
      <h1>健康监测历史数据</h1>
      <a-table :columns="columns" :data-source="dataList" bordered></a-table>
      <a-pagination
        :default-current="1"
        :total=this.page.total
        :pageSize='4'
        :default-pageSize="4"
        @change="onShowSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { healthReport } from "@/api/index";
export default {
  name: "v-table",
  props: ["tableData"],
  data() {
    return {
      // 分页
      page: {
        currentPage: 1,
        pageSize: 4,
        total: 0
      },
      dataList: [],
      columns: [
        {
          title: "时间",
          dataIndex: "time"
        },
        {
          title: "指标名称",
          dataIndex: "lable"
        },
        {
          title: "指标值",
          dataIndex: "value"
        },
        {
          title: "分析结果",
          dataIndex: "analysis"
        },
        {
          title: "参考意见",
          dataIndex: "opinion"
        }
      ]
    };
  },
  mounted() {
    this.tabList();
  },
  methods: {
    // 分页
    onShowSizeChange(current, pageSize) {
      this.page.currentPage = current;
      this.tabList();
    },
    tabList() {
      let daytime = JSON.parse(sessionStorage.getItem("daytime"));
      healthReport({
        // id:this.tableData.jianKangId,
        beginDate: daytime[0],
        endDate: daytime[1],
        // beginDate:'2020-04-24 00:00:00',
        // endDate:'2020-04-24 00:00:00',
        id: "1258711586961379329",
        size: this.page.pageSize,
        current: this.page.currentPage,
        type: this.tableData.typeOfHealth
      }).then(res => {
        debugger
        if (res.success) {
          if (res.result != null) {
            this.dataList = res.result.records;
            this.page.total = res.result.total;
            console.log(this.page);
          } else {
            this.dataList = [];
             this.page.total = ''
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tab {
  height: 55vh;
  position: absolute;
  top: 20%;
  z-index: 301;
  width: 30%;
  left: 8%;
  background: #333;
  padding: 15px;
  h1 {
    color: #ffffff;
  }
}
>>> .ant-table-tbody,
.ant-table-thead {
  color: #ffffff;
}
.ant-table-wrapper >>> .ant-pagination {
  position: absolute;
  right: 0;
  bottom: -54px;
  display: none;
}
.position {
  position: relative;
  width: 100%;
  height: 100%;
  >>> .ant-pagination {
    bottom: 0px !important;
  }
}
>>> .ant-table-wrapper,
>>> .ant-spin-nested-loading,
>>> .ant-spin-container {
  width: 100%;
  height: 100%;
}
>>> table tbody tr:hover > td {
  background: #ffffff !important;
  color: #333;
}
>>> .ant-table-thead > tr > th {
  background: #333;
  color: #fff;
}
// 分页
>>> .ant-pagination {
  margin-top: 20px;
  float: right;
  position: absolute;
  right: 0px;
}
</style>